<template>
  <div class="device-manage">
    <!-- <van-nav-bar title="添加管理" left-text="返回" right-text="按钮" @click-left="sanQRCode" @click-right="addDevice">
      <van-icon name="qr" slot="left" size="1.4em" />
      <van-icon name="add" slot="right" size="1.4em" />
    </van-nav-bar> -->

    <van-cell-group :border="true">
      <van-cell class="device-item" v-for="(item, index) in items" :key="index">
        <div class="deviceName">
          <van-icon name="smoke-sensor2" />&nbsp{{ item.devName }}</div>
        <div>{{ item.devModel }}，{{ item.imei }}</div>
        <div class="addr">{{ item.installAddr }}</div>
      </van-cell>
    </van-cell-group>
    <is-empty v-if="isEmpty">暂无设备</is-empty>
  </div>
</template>

<script>
import { getDeviceList } from "./../../api/shop";
import IsEmpty from "@/components/is-empty/";
export default {
  components: {
    IsEmpty
  },
  data() {
    return {
      isEmpty: true,
      shopId: 0,
      items: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.shopId = this.$route.query.id;
    this.initData();
  },
  activated() {},
  deactivated() {},
  methods: {
    async initData() {
      let res = await getDeviceList({ smkBuildingId: this.shopId });
      if (res.code === 0) {
        this.items = res.data;
        if (this.items.length > 0) {
          this.isEmpty = false;
        }
      } else {
        this.$toast.fail(res.msg);
      }
    }
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.van-button__text {
  width: 100%;
}
.device-item {
  padding: 15px;
  .deviceName {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
     display: flex;
    align-items:center;
  }
  .addr {
    font-size: 12px;
    line-height: 16px;
    color: #666;
  }
}
</style>
